<template>
	<panel v-bind:data="data" v-bind:headerBtnType="'close'" v-bind:hasItems="false">
		<template slot="content" scope="contentScope">
			<div class="flex-cnt-btwn panel-content">
				<img class="img" v-bind:src="contentScope.data.imgUrl">
				<div class="fill">
					<p class="title">{{contentScope.data.title}}</p>
					<p class="author">作者：{{contentScope.data.author}}</p>
					<p class="description">{{contentScope.data.description}}</p>
				</div>
			</div>
		</template>
		<template slot="footer" scope="footerScope">
			<answer-actions v-bind:data="footerScope.data"></answer-actions>
		</template>
	</panel>
</template>

<script>
	import { mapActions } from 'vuex'
	import Panel from 'CommonComponent/panel'
	import AnswerActions from 'CommonComponent/answer-actions'

	export default {
		name: 'book',
		props: {
			'data': {
				type: Object,
				required: true
			}
		},
		data () {
			return {
			}
		},
		methods: {
		},
		components: {
			'answer-actions': AnswerActions,
			'panel': Panel
		}
	}
</script>

<style lang="less" scoped>
	.panel-content {
		margin-bottom: 10px;
		.img {
			max-width: 100px;
			margin-right: 10px;
		}

		.author {
			margin-bottom: 10px;
		}

		.description {
			color: #333;

			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
			min-height: 30px;

			line-height: 18px;
		}
	}
	.panel-nouse {
		.panel-header {
			margin-bottom: 0px;
		}
	}
</style>
